{% extends('layout.html') %}
{% block head %}
    <style>
        h4 {
            margin-bottom: 0px;
        }
    </style>
{% endblock %}

{% block content %}

    <h3 style="float:left;">用户管理</h3>
    <button type="button" class="btn btn-success right margin-5" id="add_group_btn">
        <i class="icon icon-plus-sign"></i> 添加用户组
    </button>
    <div class="tablediv">
        <table class="table datatable table-hover">
            <thead>
            <tr>
                <th>ID</th>
                <th>组名</th>
                <th>说明</th>
                <th>操作</th>
            </tr>
            </thead>
            <tbody>
            {% for index, item in g.enumerate(groups) %}
                <tr val="{{ item.id }}">
                    <input type="hidden" value="{{ item.menu_ids }}"/>
                    <td>{{ index + 1 }}</td>
                    <td>{{ item.group_name }}</td>
                    <td>{{ item.desc or '空' }}</td>
                    <td>
                        {#                        <a class="text-danger margin-2" href="#"><i class="icon-info-sign"></i> </a>#}
                        <a class="text-danger margin-2 edit-group"  title="修改用户组信息" href="#"><i class="icon-edit"></i> </a>
                        <a class="text-danger margin-2 del-group"  title="删除用户组" href="#"><i class="icon-trash"></i> </a>
                    </td>
                </tr>
            {% endfor %}

            </tbody>

        </table>
    </div>
{% endblock %}

{% block script %}
    {{ super() }}
    <div class="modal fade" id="group_modal">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true"><i
                            class="icon-remove"></i></span><span
                            class="sr-only">关闭</span></button>
                    <h4 class="modal-title">添加组</h4>
                </div>
                <div class="modal-body">
                    <form class="form-horizontal">
                        <div class="form-group">
                            <label for="group_name" class="col-md-2">组名</label>
                            <div class="col-md-10">
                                <input type="text" id="group_name" class="form-control" placeholder="请输入权限组名称">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="group_name" class="col-md-2">权限</label>
                            <div class="col-md-10">
                                {% for menu_item in current_user.get_all_menus() %}
                                    {% if not menu_item[0].url %}
                                        <h4>{{ menu_item[0].show_name }}</h4>
                                        {% for child_item in menu_item[1] %}
                                            <label class="checkbox-inline">
                                                <input name="group_menu_ids" value="{{ child_item.id }}"
                                                       type="checkbox">{{ child_item.show_name }}
                                            </label>
                                        {% endfor %}
                                    {% else %}
                                        <h4>{{ menu_item[0].show_name }}</h4>
                                        <label class="checkbox-inline">
                                            <input name="group_menu_ids" value="{{ menu_item[0].id }}"
                                                   type="checkbox">{{ menu_item[0].show_name }}
                                        </label>
                                    {% endif %}

                                {% endfor %}

                            </div>
                        </div>
                        <div class="form-group">
                            <label for="group_desc" class="col-md-2">说明</label>
                            <div class="col-md-10">
                                <textarea id="group_desc" class="form-control" rows="3"
                                          placeholder="请输入对该组的说明"></textarea>
                            </div>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    <button type="button" class="btn btn-success display-none" id="add_group">添加</button>
                    <button type="button" class="btn btn-success display-none" id="edit_group">保存修改</button>
                </div>
            </div>
        </div>
    </div>
    <script>

        $('#add_group_btn').click(function () {
            reset_model_func('添加组', "", "", [], 'add_group')
            $('#group_modal').modal()
        })
        $('#add_group').click(function () {
            var group_name = $("#group_name").val()
            var group_items = []
            $('#group_modal input:checkbox:checked').each(function () {
                group_items.push($(this).val())
            })
            var group_desc = $('#group_desc').val()
            $.ajax({
                url: "{{ url_for('account.group') }}",
                type: "post",
                data: {
                    'group_name': group_name,
                    'group_menu_ids': JSON.stringify(group_items),
                    'group_desc': group_desc
                },
                success: function (result) {
                    toast('添加成功', 'success')
                    setTimeout("relocation('/account/group')", 500)
                },
                error: function (result) {
                    toast(result.responseText)
                }
            })
        })

        $('.edit-group').click(function () {
            var this_tr = $(this).parent().parent()
            var group_name = this_tr.find("td:eq(1)").text()
            var group_desc = this_tr.find("td:eq(2)").text()
            var group_items = JSON.parse(this_tr.find("input[type=hidden]").val())
            group_cur_id = this_tr.attr('val')
            reset_model_func('更新组"' + group_name + '"', group_name, group_desc, group_items, 'edit_group')
            $('#group_modal').modal()
        })

        $('#edit_group').click(function () {
            var group_name = $("#group_name").val()
            var group_items = []
            $('#group_modal input:checkbox:checked').each(function () {
                group_items.push($(this).val())
            })
            var group_desc = $('#group_desc').val()
            var group_id = group_cur_id
            $.ajax({
                url: "{{ url_for('account.edit_group') }}",
                type: "put",
                data: {
                    'group_name': group_name,
                    'group_menu_ids': JSON.stringify(group_items),
                    'group_desc': group_desc,
                    'group_id': group_id
                },
                success: function (result) {
                    toast('修改成功', 'success')
                    setTimeout("relocation('/account/group')", 500)
                },
                error: function (result) {
                    toast(result.responseText)
                }
            })
        })

        function reset_model_func(title_name, group_name, group_desc, group_items, button_select) {
            $('#group_modal .modal-title').text(title_name)
            $("#group_name").val(group_name)
            $("#group_desc").val(group_desc)
            $('#group_modal input:checkbox').each(function () {
                if ($.inArray(parseInt($(this).val()), group_items) != -1) {
                    $(this).prop('checked', true)
                } else {
                    $(this).prop('checked', false)
                }
            })
            $("#add_group").removeClass('display-inline-block')
            $('#edit_group').removeClass('display-inline-block')
            $('#' + button_select).addClass('display-inline-block')
        }

        $(".del-group").click(function () {
            var this_tr = $(this).parent().parent()
            var group_name = this_tr.find("td:eq(1)").text()
            cur_id = this_tr.attr('val')
            confirmok('确认删除"' + group_name + '"权限组？', function () {
                $.ajax({
                    url: "{{ url_for('account.delete_group') }}",
                    type: "delete",
                    data: {'id': cur_id},
                    success: function (result) {
                        toast('删除成功', 'success')
                        setTimeout("relocation('/account/group')", 500)
                    },
                    error: function (result) {
                        toast(result.responseText)
                    }
                })
            }, '删除')
        })
    </script>


{% endblock %}